<template>
	<view class="container columnY">
		<!-- <view @click="hanldeIndex" class="pad-left-right-26 pad-top-bottom-24 font-28 text-right color-grey">跳过</view> -->

		<view class="mar-top-150 ">
			<view class="centerXY">
				<image class="logo" src="../../static/image/logo.png" mode="logo"></image>
			</view>
			<view class="mar-left-65">
				<view class="font-42 color-white name">九州文创</view>
				<view class="font-32 color-white name">您好，欢迎登录！</view>
			</view>
		</view>
		<view class="pad-40 centerX columnY login-content">

			<view class="form-box radius30 pad-30">

				<view>
					<u--form labelPosition="top" :model="userInfo" ref="form1" labelWidth="130"
						:labelStyle="{color: '#fff',marginBottom:'30rpx'}">
						<u-form-item label="手机号" prop="tel" borderBottom="true">
							<u--input color="#fff" autocomplete="off" type="number" clearable
								placeholderClass="input-style" placeholder="请输入手机号" v-model.number="userInfo.tel"
								border="none"></u--input>
						</u-form-item>
						<template v-if="loginType ==1">
							<u-form-item label="密码" v-show="showPassword === true" prop="login_secret"
								class="mar-top-40" borderBottom="true">
								<u-input color="#fff" autocomplete="off" clearable :password="false"
									placeholderClass="input-style" placeholder="请输入密码" v-model="userInfo.login_secret"
									border="none">
									<template slot="suffix">
										<div>
											<u-icon color="#655d5d" size="20" class="icon" @click="changePassword"
												:name="showPassword ? 'eye-fill' : 'eye-off'"></u-icon>
										</div>
									</template>
								</u-input>
							</u-form-item>

							<u-form-item label="密码" v-show="showPassword === false" prop="login_secret"
								class="mar-top-40" borderBottom="true">
								<u-input color="#fff" autocomplete="off" clearable :password="true"
									placeholderClass="input-style" placeholder="请输入密码" v-model="userInfo.login_secret"
									border="none">
									<template slot="suffix">
										<div>
											<u-icon color="#655d5d" size="20" class="icon" @click="changePassword"
												:name="showPassword ? 'eye-fill' : 'eye-off'"></u-icon>
										</div>
									</template>
								</u-input>
							</u-form-item>
						</template>

						<u-form-item label="验证码" v-else prop="login_sms_code" class="mar-top-40" borderBottom="true">
							<u-input color="#fff" clearable placeholderClass="input-style" placeholder="请输入验证码"
								v-model="userInfo.login_sms_code" border="none">
								<template slot="suffix">
									<text v-if="codeTime == 60" @click="hanldePostCode"
										class="font-24 color-white">获取验证码</text>
									<text v-else class="font-24 color-white">{{codeText}}</text>
								</template>
							</u-input>
						</u-form-item>
					</u--form>
					<view class="betweenX action font-24 color-white">
						<view v-if="loginType == 1" @click="hanldeLoginType">验证码登录</view>
						<view v-else @click="hanldeLoginType">密码登录</view>
						<view @click="hanldePassWord">忘记密码？</view>
					</view>
					<u-button class="mar-top-20 font-32 login-button" @click="submit">登录</u-button>
					<agreement class="mar-top-30" @hanldeCheckbox="hanldeCheckbox" :checkbox="checkbox"></agreement>
					<view @click="hanldeRegister" class="text-center color-white mar-top-5 font-24 register_btn">注册新用户
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 接口地址
	import {
		postSend,
		oginPwd,
		oginSms
	} from '@/config/api.js'
	export default {
		data() {
			return {
				// 提交数据
				userInfo: {},
				//true为密码登录 false为验证码 
				loginType: true,
				// 查看密码
				showPassword: false,
				// 切换协议选择
				checkbox: false,
				// 倒计时秒
				codeTime: 60,
				// 定时器
				inter: null
			}
		},
		methods: {
			// 修改密码
			hanldePassWord() {
				uni.navigateTo({
					url: '/pages/my/editPassword'
				})
			},
			// 切换登录状态
			hanldeLoginType() {
				this.loginType = !this.loginType;
			},
			// 点击登录
			submit() {
				if (this.userInfo.tel == '') {
					uni.$u.toast('手机号不能为空')
					return
				}

				if (this.loginType == 1) {
					if (this.userInfo.login_secret == '') {
						uni.$u.toast('密码不能为空')
						return
					}
				} else {
					if (this.userInfo.login_sms_code == '') {
						uni.$u.toast('验证码不能为空')
						return
					}
				}

				if (!this.checkbox) {
					uni.$u.toast('请先勾选用户协议')
					return
				}

				// 密码登录
				if (this.loginType == 1) {
					oginPwd(this.userInfo).then(res => {
						uni.setStorageSync('token', res.data.token);
						uni.$u.toast(res.msg);
						setTimeout(() => {
							this.hanldeIndex()
							uni.setStorageSync('isLogin', true);
						}, 1000)
					})
				} else {
					// 验证码登录
					oginSms(this.userInfo).then(res => {
						uni.setStorageSync('token', res.data.token);
						uni.$u.toast(res.msg);
						setTimeout(() => {
							uni.setStorageSync('isLogin', true);
							this.hanldeIndex()
						}, 1000)
					})
				}
			},
			// 获取验证码
			hanldePostCode() {

				if (this.userInfo.tel == '') {
					uni.$u.toast('手机号不能为空')
					return
				}
				if (!/^1[23456789]\d{9}$/.test(this.userInfo.tel)) {
					uni.$u.toast('手机号格式不正确')
					return
				}
				let data = {
					tel: this.userInfo.tel,
					scene: 'user_login'
				}

				uni.showLoading({
					title: '发送中...'
				})
				postSend(data).then(res => {
					uni.hideLoading();
					uni.$u.toast(res.msg);
					clearInterval(this.inter);
					this.codeTime -= 1
					this.codeText = `${this.codeTime}秒重新获取`;
					this.inter = setInterval(() => {
						this.codeTime -= 1
						this.codeText = `${this.codeTime}秒重新获取`;
						// 倒计时完成
						if (this.codeTime <= 0) {
							this.codeTime = `获取验证码`;
							this.codeTime = 60;
							clearInterval(this.inter);
						}
					}, 1000);
				})
			},
			// 跳过登录
			hanldeIndex() {
				uni.switchTab({
					url: '/pages/home/index'
					// url: '/pages/shopmall/shop'
				})
			},
			// 注册用户
			hanldeRegister() {
				uni.navigateTo({
					url: '/pages/my/register'
				})
			},
			// 切换用户协议
			hanldeCheckbox() {
				this.checkbox = !this.checkbox;
			},
			// 产看密码
			changePassword() {
				this.showPassword = !this.showPassword;
			}
		}
	}
</script>
<style lang="scss" scoped>
	.container {
		padding-top: var(--status-bar-height); //给组件加个上边距
		box-sizing: border-box;
		background: url('../../static/image/login-bg.png') no-repeat;
		background-color: #000000;
		background-size: 100% 100%;
		min-height: 100vh;

		.login-content {
			flex-grow: 1;
		}

		.logo {
			width: 200rpx;
			height: 200rpx;
		}

		.title {
			font-weight: 600;
		}

		.name {
			font-weight: 300;
		}

		.form-box {
			background: rgba(255,255,255,0.12);
			width: 100%;			
		}

		.action {
			height: 80rpx;
			line-height: 80rpx;
		}

		.login-button {
			background: linear-gradient(90deg, #972AE6 0%, #626FBF 100%);
			box-shadow: 0 10px 15px rgba(223, 0, 7, .1);
			border: 0 none;
			height: 96rpx;
			color: white;
			border-radius: 50rpx;
		}

		.register_btn {
			height: 80rpx;
			line-height: 80rpx;
		}

	}
</style>